<template>
    <div>
        <ul>
            <li @click="$emit('update:active', 1)" :class="{ active: active === 1 }">1</li>
            <li @click="$emit('update:active', 2)" :class="{ active: active === 2 }">2</li>
            <li @click="$emit('update:active', 3)" :class="{ active: active === 3 }">3</li>
            <li @click="$emit('update:active', 4)" :class="{ active: active === 4 }">4</li>
            <li @click="$emit('update:active', 5)" :class="{ active: active === 5 }">5</li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        active: {
            type: Number,
            default: 1
        }
    }
}
</script>

<style lang="scss">
.active {
    background-color: green;
    color: white;
}

ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        width: 30px;
        height: 30px;
        background-color: beige;
        margin: 5px;
        border: solid;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>